<template>
	<view class="content-header">
		<view v-if="userddressList.length==0">
			<image class="not-img" src="../../static/user/notaddress.png" mode="scaleToFill"></image>
			<view class="not-txt">暂无收货地址</view>
			<view class="flex-row flex-content-center">
				<view class="add-address" @tap="toAddress(`新增收货地址`)">添加收货地址</view>
			</view>
		</view>
		<view v-if="userddressList.length>0">
		<view class="top20"></view>
			<scroll-view :scroll-y="true" class="address-scroll">
				<view class="address-body">
					<view v-for="(addre,inde) in userddressList" class="ones" @tap="selects(addre)">
						<view class="flex-row flex-content-between flex-item-center address-info">
							<view class="flex-column">
								<view class="flex-row address-txt1">
									<view>{{addre&&addre.province&&addre.province.name?addre.province.name:""}}{{addre&&addre.city&&addre.city.name?addre.city.name:""}}{{addre&&addre.area&&addre.area.name?addre.area.name:""}}</view>
									<view v-if="addre.is_default==1">默认</view>
								</view>
								<view class="address-txt2">{{addre.address}}</view>
								<view class="flex-row address-txt3">
									<view>{{addre.contact_name}}</view>
									<view>{{$utils.hideMobile(addre.contact_mobile,"*",3,4)}}</view>
								</view>
							</view>
							<view class="flex-row shanc">
								<view @tap.stop="deleteAddress(addre)">删除</view>
								<view></view>
								<view @tap.stop="toAddress(`编辑地址`,addre.id)">编辑</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<mu-suspension bottom="67">
				<view class="flex-row">
					<view class="addbtn flex-row flex-content-center flex-item-center">
						<image src="../../static/user/jiayige.png" mode="scaleToFill"></image>
						<view @tap="toAddress(`新增收货地址`)">添加收货地址</view>
					</view>
				</view>
			</mu-suspension>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				back:0,
				// userddressList:[
					
				// ]
			}
		},
		computed:{
			userddressList(){
				return this.$store.state.address.userddressList
			}
		},
		onLoad(opt) {
			let token = uni.getStorageSync('token')
			if(token){
				this.$store.dispatch("getUserAddress");
			}
			if(opt.back){
				this.back = opt.back
			}
			// console.log(this.$store.state.address.userddressList);
		},
		methods:{
			//选择地址
			selects(address){
				if(this.back==1){
					uni.setStorageSync("get_userAddress",address);
					uni.navigateBack();
				}
			},
			//跳转到加地址
			toAddress(title,id){
				if(id){
					uni.navigateTo({
						url:'/pages/user/change_address?title='+title+"&id="+id
					})
				}else{
					uni.navigateTo({
						url:'/pages/user/change_address?title='+title
					})
				}
				
			},
			deleteAddress(item){
				// var userddressList = this.userddressList;
				var that = this;
				uni.showModal({
					title:"删除地址后将无法恢复",
					content:"是否删除该地址？",
					confirmText:"删除",
					success(res) {
						// console.log(res);
						if(res.confirm){
							that.$api.delAddress({
								id:item.id
							}).then(ress=>{
								that.$store.dispatch("getUserAddress");
								that.$utils.showMessage("删除成功")
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.shanc{
		>view:nth-child(1){
			font-size: 26rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		>view:nth-child(2){
			width: 0px;
			height: 20rpx;
			opacity: 1;
			border-left: 1rpx solid #707070;
			margin-left: 14rpx;
			margin-top: 9rpx;
		}
		>view:nth-child(3){
			font-size: 26rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 14rpx;
		}
	}
	.addbtn{
		width: 400rpx;
		height: 90rpx;
		background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
		border-radius: 45rpx 45rpx 45rpx 45rpx;
		opacity: 1;
		margin-left: 175rpx;
		>image{
			width: 26rpx;
			height: 26rpx;
			line-height: 90rpx;
		}
		>view{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: $default-button-foncolor;
			line-height: 90rpx;
			margin-left: 17rpx;
		}
	}
	.address-txt3{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 15rpx;
		>view:nth-child(2){
			margin-left: 23rpx;
		}
	}
	.address-txt1{
		>view:nth-child(1){
			font-size: 26rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		>view:nth-child(2){
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF5000;
			margin-left: 20rpx;
		}
	}
	.address-txt2{
		font-size: 26rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 15rpx;
	}
	.address-info{
		padding-top: 26rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	.add-img{
		width: 28rpx;
		height: 28rpx;
		margin-top: -20rpx;
	}
	.ones{
		width: 690rpx;
		// height: 175rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		margin-bottom: 20rpx;
		padding-bottom: 24rpx;
	}
	.address-body{
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-bottom: 30rpx;
	}
	/* #ifdef H5 */
	.address-scroll{
		width: 750rpx;
		height: calc(100vh - 115rpx - 157rpx);
		// background-color: #00ffff;
	}
	/* #endif */
	/* #ifdef APP-PLUS */
	.address-scroll{
		width: 750rpx;
		height: calc(100vh - 115rpx - 70rpx);
		// background-color: #00ffff;
	}
	/* #endif */
	/* #ifdef MP */
	.address-scroll{
		width: 750rpx;
		height: calc(100vh - 115rpx - 70rpx);
		// background-color: #00ffff;
	}
	/* #endif */
	.add-address{
		width: 400rpx;
		height: 90rpx;
		background: linear-gradient(90deg, $default-button-color 0%, $default-button-end-color 100%);
		border-radius: 45rpx 45rpx 45rpx 45rpx;
		opacity: 1;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
		margin-top: 133rpx;
	}
	.not-txt{
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-left: 299rpx;
		margin-top: 20rpx;
	}
	.not-img{
		width: 260rpx;
		height: 260rpx;
		margin-left: 245rpx;
		margin-top: 240rpx;
	}
</style>